import React, { useState, useEffect } from 'react'
import { Breadcrumb, Button, Table } from "antd"
import { SearchOutlined, CloudUploadOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import style from '../index.module.scss'
import Echarts11 from './Echarts11';

export default function Echarts1() {
    const [echart1, setMain] = useState('')
    const columns = [
        {
            title: '浏览人数',
            dataIndex: 'numbers1',
        },
        {
            title: '贷款人数',
            dataIndex: 'numbers2',
        },
        {
            title: '申请贷款数',
            dataIndex: 'apply_numbers',
        },
        {
            title: '有效贷款数',
            dataIndex: 'use_numbers',
        },
        {
            title: '审批未通过人数',
            dataIndex: 'nopass_numbers',
        },
        {
            title: '放款人数',
            dataIndex: 'pass_numbers',
        },
        {
            title: '放款金额',
            dataIndex: 'pass_money',
        },
        {
            title: '平均贷款金额',
            dataIndex: 'average_money',
        },
    ];
    const dataSource = [
        {
            key: '1',
            numbers1: 1888,
            numbers2:235,
            apply_numbers:643,
            use_numbers:130,
            nopass_numbers:55,
            pass_numbers:180,
            pass_money:'￥190587.71',
            average_money: '￥1782',
            
        },
    ];
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data: ['放款', '贷款', '浏览']
        },
        series: [
            {
                name: '贷款概况',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: [
                    { value: 60, name: '浏览' },
                    { value: 40, name: '贷款' },
                    { value: 20, name: '放款' },
                ]
            }
        ]
    };
    useEffect(() => {
        var node = document.getElementById('echart1')
        setMain(node)
    }, [])
    // 基于准备好的dom，初始化echarts实例
    if (echart1 !== "") {
        var myChart = echarts.init(echart1);
        myChart.resize({ height: '400px' })
        myChart.setOption(option);
    }
    return (
        <div>
            <div className={style.pre_title}>
                <p>贷款概况</p>
                <Button className='button'><CloudUploadOutlined className="icon" />导出</Button>
            </div>

            <Table dataSource={dataSource} columns={columns} pagination={false}/>
            <div id="echart1"></div>
            <Echarts11/>
        </div>
    )
}
